import React, { Component } from 'react';
import { connect } from 'dva';
import { bindActionCreators } from 'redux';

import EditorHeader from './EditorHeader/Header';
import HandleHeader from './EditorHeader/HandleHeader';
import Leftbar from './Leftbar/Leftbar';
import Menu from './Menu';
import EditorArea from './EditorArea';
import Rightbar from './Rightbar/Rightbar';
import UsehelpWizard from './Wizard';
import EditorTypeChecker from './TypeChecker';

import editorTypes from '../../consts/editorTypes';
import editorActions from '../../actions/Editor/editor';
import widgetsActions from '../../actions/Editor/widgets';
import wizardActions from '../../actions/Editor/wizard';


class EditorComponent extends Component {
    genDialog() {
        const { dialog } = this.props;
        if (dialog.component) {
            const Dialog = dialog.component;
            return (
                    <div>
                        <Dialog context={dialog.context} handlers={dialog.handlers} />
                        <div className="dialog-cover" style={{ display: dialog.type === '' ? 'none' : 'block' }}/>
                    </div>
                )
        }
        return <div />;
    }

    render() {
        const { editor, wizard, setWizardState, setSwitchType, setState, addWidget, loading} = this.props;
        const dialogComponent = this.genDialog();
        const leftbarProps = {
            showTimeline: editor.showTimeline,
            showList: editor.showList,
            selectedPageId: editor.selectedPageId,
            addWidget,
            setState,
        };
        return (
          <div>
            <div className={editor.editorType !== editorTypes.UNCHECKED ? '' : 'hide'}>
              <EditorHeader status={editor.status} setSwitchType={setSwitchType} />
              <HandleHeader
                switchType={editor.status.switchType} fromTemplate={editor.fromTemplate}
                scale={editor.scale} setState={setState}
              />
              <Leftbar {...leftbarProps}/>
              <EditorArea />
              <Rightbar />
              <UsehelpWizard
                {...wizard} loading={loading.global} fromTemplate={editor.fromTemplate}
                setState={setWizardState}
              />
            </div>
            <EditorTypeChecker />
            <Menu menuShow={editor.menuShow} setState={setState} menuType={editor.menuType}/>
            {dialogComponent}
          </div>
        );
    }
}
const mapStateToProps = ({ editor, widgets, wizard, loading, dialog }) => {
    return ({ widgets, editor, wizard, loading, dialog });
};
const mapDispatchToProps = (dispatch) => {
    const action = { ...widgetsActions, ...editorActions, setWizardState: wizardActions.setState };
    return bindActionCreators(action, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(EditorComponent);
